<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>派工</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link href="css/main.css" media="all" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
        /* 新增样式，让表单元素在同一行显示 */
        .layui-form-item {
            display: flex;
            align-items: center;
        }

        /* 新增样式，设置选择员工标签和下拉框的间距 */
        .layui-form-label {
            margin-right: 20px;
            width: auto;
        }

        /* 新增样式，设置下拉框的宽度 */
        .layui-input-block {
            flex: 1;
            margin-left: 0;
        }
    </style>
</head>
<body>
<div style="padding: 20px;">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">选择员工</label>
            <div class="layui-input-block">
                <select id="staffSelect" lay-verify="required" name="staffId" style="width: 100%;">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="assignSubmit" lay-submit>确认派工</button>
            </div>
        </div>
    </form>
</div>

<script src="lib/layui/layui.js"></script>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form;  // 确保这里获取的是form模块
        var layer = layui.layer;

        // 确保form模块已加载
        if (!form) {
            console.error('Layui form模块加载失败');
            return;
        }

        // 获取URL参数
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return false;
        }

        var orderId = getQueryVariable('id');
        var orderType = getQueryVariable('type');

        // 加载员工列表
        $.ajax({
            url: 'manager/staff',
            type: 'get',
            success: function (res) {
                if (res.code === 200) {
                    var html = '';
                    $.each(res.data, function (index, item) {
                        html += '<option value="' + item.userId + '">' + item.name + item.phone + '</option>';
                    });
                    $('#staffSelect').append(html);
                    form.render('select');
                }
            }
        });

        if (orderType == "repair") {
            // 提交维修派工
            form.on('submit(assignSubmit)', function (data) {
                console.log(data.field)
                console.log(orderId)
                $.ajax({
                    url: '/maintenance/assignStaff',
                    type: 'post',
                    data: {
                        orderId: orderId,
                        staffId: data.field.staffId
                    },
                    success: function (res) {
                        if (res.code === 200) {
                            layer.msg(res.msg, {icon: 1});
                            setTimeout(function () {
                                parent.layer.closeAll();
                                parent.loadComplaints();
                            }, 1000);
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }
                });
                return false;
            });
        } else {
            // 提交保洁派工
            form.on('submit(assignSubmit)', function (data) {
                console.log(data.field)
                console.log(orderId)
                $.ajax({
                    url: '/cleaningOrders/assignStaff',
                    type: 'post',
                    data: {
                        orderId: orderId,
                        staffId: data.field.staffId
                    },
                    success: function (res) {
                        if (res.code === 200) {
                            layer.msg(res.msg, {icon: 1});
                            setTimeout(function () {
                                parent.layer.closeAll();
                                parent.loadComplaints();
                            }, 1000);
                        } else {
                            layer.msg(res.msg, {icon: 2});
                        }
                    }
                });
                return false;
            });
        }
    });
</script>
</body>
</html>